<template>
  <div class="full-box" style="display: flex">
    <!-- 地图-模型参数配置 -->
    <div class="map-container">
      <Map @onload="handleMapLoad" :options="mapOptions" />
    </div>
    <mapBaseLayer @handleChangeTree="changeChecked" />
    <div class="page-back-box" @click="goBack"><span class="back-icon"></span> 返回</div>
    <el-select
      v-model="state.selectProject"
      placeholder="水动力建模工程"
      :teleported="false"
      class="select-project-box select-global-css"
      @change="handleChangeProject"
      v-if="props.modelobj.typeCode == 'W040002' || props.modelobj.typeCode == 'W040001'"
    >
      <el-option
        v-for="item in projectData"
        :key="item.id"
        :label="item.engrName"
        :value="item.id"
      />
    </el-select>
    <div class="select-box">
      <SchemeSelect
        v-if="!(props.modelobj.typeCode == 'W080001')"
        :placeholder="state.placeholderOne"
        :define-options="state.options"
        :images="'u97.png'"
        @changeSelect="changeSelect"
      />
      <SchemeSelect
        v-else
        :placeholder="state.placeholderOne"
        :define-options="state.options"
        :images="'u97.png'"
        @changeSelect="changeSelectRight"
      />

      <div
        class="mt-4"
        v-if="props.modelobj.typeCode == 'W010002' || props.modelobj.typeCode == 'W010003'"
      >
        <el-input v-model="state.byName" placeholder="预报断面" class="input-with-select" clearable>
          <template #append>
            <el-icon @click="handleInput(state.byName)">
              <Search />
            </el-icon>
          </template>
        </el-input>
      </div>
      <el-input
        v-model="state.inputValue"
        placeholder="水库"
        class="input-with-select"
        v-if="
          props.modelobj.typeCode == 'W090001' ||
          props.modelobj.typeCode == 'W090002' ||
          props.modelobj.typeCode == 'W090006'
        "
      >
        <template #append>
          <el-icon @click="handleReservoir(state.inputValue)">
            <Search />
          </el-icon>
        </template>
      </el-input>
      <SchemeList
        v-if="props.modelobj.typeCode == 'W040002'"
        :images="'u101.png'"
        :title="'演进区域'"
        :showbtn="false"
        :show-list="false"
      >
        <div class="ul-box">
          <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleChangeTab" stretch>
            <el-tab-pane label="二维" name="first">
              <ul>
                <li
                  :class="['item-li', currentLi === index ? 'active' : '']"
                  :key="index"
                  v-for="(item, index) in state.sectionArr"
                  @click="secClicked(item, index)"
                >
                  <el-tooltip
                    :content="item?.title"
                    placement="bottom"
                    :disabled="item?.title?.length < 9"
                  >
                    <span>{{ item.title }}</span>
                  </el-tooltip>
                </li>
              </ul>
            </el-tab-pane>
            <!-- <el-tab-pane label="耦合" name="second">
              <ul>
                <li
                  :class="['item-li', currentLi === index ? 'active' : '']"
                  :key="index"
                  v-for="(item, index) in state.sectionArr"
                  @click="secClicked(item, index)"
                >
                  <el-tooltip
                    :content="item.title"
                    placement="bottom"
                    :disabled="item.title?.length < 9"
                  >
                    <span>{{ item.title }}</span>
                  </el-tooltip>
                </li>
              </ul>
            </el-tab-pane> -->
          </el-tabs>
        </div>
      </SchemeList>
      <!-- //时空变源 -->
      <SchemeList
        v-else-if="props.modelobj.typeCode == 'W010001'"
        @clickLi="secClicked"
        @handlePosition="secClickedMapPosition"
        :images="'u101.png'"
        :title="'计算单元'"
        :data-list="state.sectionArr"
        :showbtn="false"
      />
      <!-- 当是联合调度时 -->
      <SchemeList
        v-else-if="props.modelobj.typeCode == 'W090003'"
        @clickLi="secClicked"
        @handlePosition="secClickedMapPosition"
        :images="'u101.png'"
        :title="'水库群'"
        :data-list="state.sectionArr"
        :showbtn="true"
        :show-list="false"
        btn-name="新建水库群"
        @handleAdd="handleCreateReservoir"
      >
        <div class="ul-box">
          <ul>
            <li
              :class="['item-li', currentLi === index ? 'active' : '']"
              :key="index"
              v-for="(item, index) in state.sectionArr"
              @click="secClicked(item, index)"
            >
              <el-tooltip
                :content="item.rangeName"
                placement="bottom"
                :disabled="item.rangeName?.length < 9"
              >
                <span>{{ item.rangeName }}</span>
              </el-tooltip>
              <!-- 修改区域 -->
              <span class="edit-icon" @click.stop="handleCreateReservoir(item)">
                <el-icon>
                  <edit />
                </el-icon>
              </span>
              <span class="close-icon" @click.stop="handleDeleteReservoir(item)">X</span>
            </li>
          </ul>
        </div>
      </SchemeList>
      <SchemeList
        v-else-if="!(props.modelobj.typeCode == 'W080001')"
        @clickLi="secClicked"
        @handlePosition="secClickedMapPosition"
        :images="'u101.png'"
        :title="props.modelobj.typeCode == 'W040001' ? '演进区域' : '预报断面'"
        :data-list="state.sectionArr"
        :showbtn="false"
      />
    </div>
    <reservoirDialog ref="reservoirDialogRef" @handleRefresh="handleRefresh" />

    <div class="rightBox" :class="{ 'hidden-icon': ishidden }">
      <div class="fold-icon" @click="closeRightBox">
        <el-icon>
          <DArrowRight :class="{ 'hidden-icon': ishidden }" />
        </el-icon>
      </div>
      <ConfigItem
        :modelobj="props.modelobj"
        :sectionName="sectionName"
        :sectionObj="state.sectionObj"
        :zoneId="zoneId"
        :over-hide="state.overHide"
      />
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import Map from '@/components/app-map/map.vue'
import mapBaseLayer from '@/components/app-map/mapBaseLayer/index.vue'
import SchemeList from '@/components/app-publicui/scheme-list.vue'
import SchemeSelect from '@/components/app-publicui/scheme-select.vue'
import ConfigItem from './cpns/ConfigItem/index.vue'
//联合调度弹框
import reservoirDialog from '@/pages/ModelManage/cpns/ModelConfig/cpns/ConfigMap/cpns/ConfigItem/cpns/reservoirDialog.vue'
import emitter from '@/utils/bus'
import {
  getZone,
  getResvResvs,
  //查询库群站点
  getRangeSections,
  getSectionTree,
  // 查询水动力分区列表
  getZoneList,
  // Ai洪水断面信息表
  getFloodSectionsList,
  // ai水库调度
  getReservoirSectionsList,
  // 查询水库群
  getRanges,
  // 查询时空变源计算单元
  getSkbyCalUnits,
  // 查询时空变源对应的预报断面
  getSkbyCalUnitSections,
  // 查询时空变源对应的水源信息
  getSkbyCalUnitSources,
  //删除联合区间
  deleteJointRange,
  // 溃坝水库列表
  getDbfSectionsList,
  //水动力建模工程
  getProjectList
} from '@/services/modules/model-config'
import {
  //查看小流域空间坐标
  getWataGeom,
  getSectionUnitGeom,
  getXajUnitGeomList,
  getXajUnitGeom
} from '@/services/modules/map.js'
import {
  clearLayer,
  addSecPoints,
  addSecName,
  addTopology,
  addJsUnit,
  addJsUnitNoScheme,
  addRainLayer,
  addWataLayer,
  addRiverLayer,
  addNodeLayer,
  changeJsUnitSecGraphic,
  positionRiver,
  addTileLayer,
  addDynamicLayerShowAll,
  locatePoint,
  addBasinVectorTiles,
  removeBasinVectorTiles,
  multipolygonToLnglats,
  addTopologyPosition,
  addTopologyOne,
  addGeojsontoFly,
  addSecColorPoints
} from '@/utils/mapUtils'
import {
  SEC_LAYER,
  KB_LAYER,
  SEC_NAME_LAYER,
  JS_UNIT_LAYER,
  TOPOLOGY_LAYER,
  WATA_LAYER,
  RIVER_LAYER,
  NODE_LAYER,
  RAIN_LAYER,
  DWH_SKBYUNIT_LAYER_URL,
  DWH_SKBYUNIT_LAYER,
  DWH_BASE_LAYER_URL,
  DWH_BASE_LAYER,
  YSH_BASE_LAYER,
  YSH_BASE_LAYER_URL,
  DWH_XAJUNIT_LAYER_URL,
  DWH_XAJUNIT_LAYER,
  YSH_XAJUNIT_LAYER_URL,
  YSH_XAJUNIT_LAYER,
  UNIT_SEC_LAYER,
  UNIT_COMPUT_LAYER,
  UNIT_PART_LAYER,
  DWH_SDLSEC_LAYER1_URL,
  DWH_SDLSEC1_LAYER,
  YSH_SDLSEC_LAYER1_URL,
  YSH_SDLSEC1_LAYER,
  DWH_SDLSEC2_LAYER,
  DWH_SDLSEC_LAYER2_URL,
  YSH_SDLSEC_LAYER2_URL,
  YSH_SDLSEC2_LAYER
} from '@/constants'
//地图api
import {
  getPPtnGeomList,
  getSecGeomList,
  getNodeGeomList,
  getTopologyGeomList
} from '@/services/modules/map.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import sec_info from '@/assets/data/com_data/sec_info.json'
// 地图JSON 数据
import secData from '@/assets/data/map_data/sec.json'
import jsUnitData from '@/assets/data/map_data/js_unit.json'
import topologyData from '@/assets/data/map_data/topology.json'
import wataData from '@/assets/data/map_data/wata.json'
import riverData from '@/assets/data/map_data/rivl.json'
import nodeData from '@/assets/data/map_data/node.json'
import dwhRain from '@/assets/data/map_data/dwhRain.json'
//沂沭河流域json
import yshsecData from '@/assets/data/map_data/yshInfo/sec.json'
import yshjsUnitData from '@/assets/data/map_data/yshInfo/unitdata.json'
import yshtopologyData from '@/assets/data/map_data/yshInfo/topologyData.json'
import yshnodeData from '@/assets/data/map_data/yshInfo/node.json'
import yshRain from '@/assets/data/map_data/yshInfo/yshRain.json'
import { BASE_URL } from '@/services/config'
const state = reactive({
  flag: '',
  selectProject: '',
  title: '新建水库群',
  dialogVisible: false,
  inputValue: '',
  pptn: {},
  secGeoData: {},
  nodeGeoData: {},
  topologyGeoData: {},
  placeholder: '大汶河优选方案',
  placeholderOne: '大汶河流域',
  options: [],
  sectionObj: {},
  // 二维左侧树 数据
  twdList: [],
  // 耦合左侧树 数据
  couplingList: [],
  // 控制河道断面显隐：二维则不展示河道断面，为false,耦合则展示河道断面
  overHide: false
})
const projectData = ref([])
const mapOptions = { crs: 'EPSG:4490', basemaps: [] }
const currentLi = ref(null)
const reservoirDialogRef = ref(null)
const activeName = ref('first')
let zoneId = ref(1)
const sectionName = ref(null)
const ishidden = ref(true)
const closeRightBox = () => {
  ishidden.value = !ishidden.value
}
//secStyle
const secStyle = reactive({
  fill: true,
  fillColor: '#3388ff',
  // fillColor: 'white',
  fillOpacity: 0.3,
  outline: true,
  outlineWidth: 1,
  outlineColor: '#0000FF',
  outlineOpacity: 0.5
})
//新安江style
const xajUnitStyle = reactive({
  xaj: {
    weight: 0.3,
    fillOpacity: 0.6,
    fillColor: 'red',
    color: 'red',
    fill: false
  }
})
//时空变源style
const skbyUnitStyle = reactive({
  skby: {
    weight: 0.3,
    fillOpacity: 0.6,
    fillColor: 'red',
    color: 'yellow',
    fill: false
  }
})
// 地图河道小流域
const baselayerStyle = reactive({
  //小流域
  wata: {
    weight: 0.8,
    fillOpacity: 0.6,
    fillColor: '#FFFF00',
    color: '#FFFF00',
    fill: false
  },
  //河道
  rivl: {
    weight: 1,
    color: '#00BFFF'
  }
})
const selectedsecStyle = reactive({
  fill: true,
  fillColor: '#1a8e17',
  fillOpacity: 0.6,
  outline: true,
  outlineWidth: 1,
  outlineColor: '#0000FF',
  outlineOpacity: 0.5
})
//地图小流域
const basinLayerStyle = reactive({
  //小流域
  wata: {
    weight: 0.8,
    fillOpacity: 0.6,
    fillColor: '#FFFF00',
    color: '#FFFF00',
    fill: false
  },
  //河道
  rivl: {
    weight: 1,
    color: '#00BFFF',
    opacity: 0
  }
  //水动力
  // ？？？
})
const sdl2UnitStyle = reactive({
  sdl: {
    weight: 1,
    fillOpacity: 0.6,
    color: 'red',
    // outlineColor:'green',
    // outlineWidth:0.05,
    fill: false
  }
})
const riverLayerStyle = reactive({
  //小流域
  wata: {
    weight: 0.8,
    fillOpacity: 0.6,
    fillColor: '#FFFF00',
    color: '#FFFF00',
    fill: false
  },
  //河道
  rivl: {
    weight: 1,
    color: '#00BFFF'
  }
  //水动力
  // ？？？
})
let mapInstance = null
const goBack = () => {
  emitter.emit('goback', true)
}
const props = defineProps({
  modelobj: {
    type: Object,
    default: () => {}
  }
})
// onMounted(
//   () => {
//     console.log(props.modelobj.specialName);
//   }
// )
const checkSec1 = ref(true)
const checkSec = ref(true)
const checkJsUnit = ref(true)
const checkTopology = ref(true)
const checkRiverSec = ref(true)
const checkRiverGrid = ref(true)
const checkWata = ref(true)
const checkRiver = ref(true)
const checkNode = ref(true)
const checkRainSite = ref(true)
const sdl1UnitStyle = reactive({
  sdl: {
    weight: 1,
    // fillOpacity: 0.6,
    fillColor: 'red',
    color: 'red',
    fill: false
  }
})
//修改水利工程
function handleChangeProject(item) {
  getZoneList({
    modelType: state.flag,
    zoneId: zoneId.value,
    engrId: item
  }).then((res) => {
    if (res.code === 200) {
      res.data.forEach((item) => {
        item.title = item.zoneName
      })
      state.sectionArr = res.data
    }
  })
  removeBasinVectorTiles(mapInstance, DWH_SDLSEC1_LAYER)
  removeBasinVectorTiles(mapInstance, YSH_SDLSEC1_LAYER)
  removeBasinVectorTiles(mapInstance, DWH_SDLSEC2_LAYER)
  removeBasinVectorTiles(mapInstance, YSH_SDLSEC2_LAYER)
  if (state.flag == 0) {
    addBasinVectorTiles(
      mapInstance,
      BASE_URL + `/map/vectorTiles/sdl/1/${zoneId.value}/${item}/{z}/{x}/{y}`,
      zoneId.value == 1 ? DWH_SDLSEC1_LAYER : YSH_SDLSEC1_LAYER,
      sdl1UnitStyle
    )
  } else {
    addBasinVectorTiles(
      mapInstance,
      BASE_URL + `/map/vectorTiles/sdl/2/${zoneId.value}/${item}/{z}/{x}/{y}`,
      zoneId.value == 1 ? DWH_SDLSEC2_LAYER : YSH_SDLSEC2_LAYER,
      sdl2UnitStyle
    )
  }
}
//新建水库群
function handleCreateReservoir(item) {
  reservoirDialogRef.value.handleOpenDialog({ ...item, zoneId: zoneId.value })
}
//查询预报断面
function handleInput(name) {
  // 查询预报断面结构树
  getSectionTree({
    zoneId: zoneId.value,
    blknm: name
  }).then((res) => {
    if (res.code === 200) {
      state.sectionArr = res.data.map((item) => ({
        title: item.blknm,
        id: item.id,
        blkcd: item.blkcd
      }))
    }
  })
}
//删除联合区间
function handleDeleteReservoir(item) {
  ElMessageBox.confirm(`是否删除该联合区间`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      deleteJointRange({ id: item.id }).then((res) => {
        if (res.code === 200) {
          ElMessage.success(res.msg)
          getLeftTree()
        }
      })
    })
    .catch(() => {})
}
//查询水库
function handleReservoir(val) {
  if (props.modelobj.typeId != 11) {
    //查询库群站点
    getRangeSections({
      zoneId: zoneId.value,
      blknm: val
    }).then((res) => {
      if (res.code === 200) {
        state.sectionArr = res.data.map((item) => ({
          title: item.blknm,
          id: item.id,
          blkcd: item.blkcd
        }))
      }
    })
  } else {
    // 溃坝
    handleKbInfo(val, zoneId.value)
  }
}
//地图获取雨量站
function PPtnGeomList() {
  return new Promise((resolve, reject) => {
    getPPtnGeomList({ zoneId: zoneId.value }).then((res) => {
      if (res.code === 200) {
        state.pptn = res.data
        resolve(state.pptn)
      }
    })
  })
}
//地图获取预报对象
function SecGeomList() {
  return new Promise((resolve, reject) => {
    getSecGeomList({ zoneId: zoneId.value }).then((res) => {
      if (res.code === 200) {
        state.secGeoData = res.data
        resolve(state.secGeoData)
      }
    })
  })
}
//地图获取节点
function NodeGeomList() {
  return new Promise((resolve, reject) => {
    getNodeGeomList({ zoneId: zoneId.value }).then((res) => {
      if (res.code === 200) {
        state.nodeGeoData = res.data
        resolve(state.nodeGeoData)
      }
    })
  })
}
//地图获取拓扑线
function TopologyGeomList() {
  return new Promise((resolve, reject) => {
    getTopologyGeomList({ zoneId: zoneId.value }).then((res) => {
      if (res.code === 200) {
        state.topologyGeoData = res.data
        resolve(state.topologyGeoData)
      }
    })
  })
}
/**
 * 地图实例完成后的调用函数
 */
const handleMapLoad = async ({ map }) => {
  mapInstance = map
  await PPtnGeomList()
  await SecGeomList()
  await NodeGeomList()
  await TopologyGeomList()
  const layerUrlS = mapUrl
  addTileLayer(mapInstance, layerUrlS, 0, 74, '山东底图')
  addDynamicLayerShowAll(
    mapInstance,
    'https://giskg-sdsl.gistack.cn/OneMapServer/rest/services/L1_Liuyujie/MapServer',
    12,
    11,
    '流域界'
  )
  // //添加矢量切片数据
  // addBasinVectorTiles(map, DWH_XAJUNIT_LAYER_URL, DWH_XAJUNIT_LAYER, xajUnitStyle)

  // 添加断面点
  addSecPoints(mapInstance, state.secGeoData.features, SEC_LAYER)
  // 添加断面名称
  addSecName(mapInstance, state.secGeoData.features, SEC_NAME_LAYER)
  //添加计算单元
  // addJsUnitNoScheme(map, jsUnitData, JS_UNIT_LAYER)
  //添加拓扑线
  addTopology(mapInstance, state.topologyGeoData, TOPOLOGY_LAYER)
  // addBasinVectorTiles(map, DWH_BASE_LAYER_URL, DWH_BASE_LAYER, baselayerStyle)
  //添加小流域
  // addWataLayer(map, wataData, WATA_LAYER)
  //添加河道
  // addRiverLayer(map, riverData, RIVER_LAYER)
  //添加节点
  addNodeLayer(mapInstance, state.nodeGeoData, NODE_LAYER)
  //添加雨量站
  addRainLayer(map, state.pptn, RAIN_LAYER)
  // if (props.modelobj.typeCode == 'W040001') {
  //   addBasinVectorTiles(mapInstance, DWH_SDLSEC_LAYER1_URL, DWH_SDLSEC1_LAYER, sdl1UnitStyle)
  // } else if (props.modelobj.typeCode == 'W040002') {
  //   addBasinVectorTiles(mapInstance, DWH_SDLSEC_LAYER2_URL, DWH_SDLSEC2_LAYER, sdl2UnitStyle)
  // }
  locatePoint(mapInstance, 117.1775, 36.06469, 10)
}
const changeChecked = async ({ event, item }) => {
  // removeBasinVectorTiles(mapInstance, DWH_SDLSEC1_LAYER)
  // removeBasinVectorTiles(mapInstance, YSH_SDLSEC1_LAYER)
  // removeBasinVectorTiles(mapInstance, DWH_BASE_LAYER)
  // removeBasinVectorTiles(mapInstance, DWH_XAJUNIT_LAYER)
  // removeBasinVectorTiles(mapInstance, YSH_XAJUNIT_LAYER)
  // await PPtnGeomList()
  // await SecGeomList()
  // await NodeGeomList()
  // await TopologyGeomList()
  //被选中的值
  console.log(event + ':' + item)
  switch (item) {
    case 'riverSec':
      if (event) {
        // if (zoneId.value == 1) {
        //   addBasinVectorTiles(mapInstance, DWH_SDLSEC_LAYER1_URL, DWH_SDLSEC1_LAYER, sdl1UnitStyle)
        // } else if (zoneId.value == 2) {
        //   addBasinVectorTiles(mapInstance, YSH_SDLSEC_LAYER1_URL, YSH_SDLSEC1_LAYER, sdl1UnitStyle)
        // }
      } else {
        removeBasinVectorTiles(mapInstance, DWH_SDLSEC1_LAYER)
        removeBasinVectorTiles(mapInstance, YSH_SDLSEC1_LAYER)
      }
      break
    case 'riverGrid':
      if (event) {
        // if (zoneId.value == 1) {
        //   addBasinVectorTiles(mapInstance, DWH_SDLSEC_LAYER2_URL, DWH_SDLSEC2_LAYER, sdl2UnitStyle)
        // } else if (zoneId.value == 2) {
        //   addBasinVectorTiles(mapInstance, YSH_SDLSEC_LAYER2_URL, YSH_SDLSEC2_LAYER, sdl2UnitStyle)
        // }
      } else {
        removeBasinVectorTiles(mapInstance, DWH_SDLSEC2_LAYER)
        removeBasinVectorTiles(mapInstance, YSH_SDLSEC2_LAYER)
      }
      break
    case 'sec':
      if (event) {
        // 添加断面点
        addSecPoints(mapInstance, state.secGeoData.features, SEC_LAYER)
        // 添加断面名称
        addSecName(mapInstance, state.secGeoData.features, SEC_NAME_LAYER)
      } else {
        clearLayer(mapInstance, SEC_LAYER)
        clearLayer(mapInstance, SEC_NAME_LAYER)
      }
      break
    // case 'jsUnit':
    //   if (event) {
    //     if (zoneId.value == 1) {
    //       //添加计算单元
    //       addBasinVectorTiles(mapInstance, DWH_XAJUNIT_LAYER_URL, DWH_XAJUNIT_LAYER, xajUnitStyle)
    //       // addJsUnit(mapInstance,jsUnitData,JS_UNIT_LAYER)
    //     } else if (zoneId.value == 2) {
    //       // // //添加计算单元
    //       // addJsUnit(mapInstance, yshjsUnitData, JS_UNIT_LAYER)
    //       addBasinVectorTiles(mapInstance, YSH_XAJUNIT_LAYER_URL, YSH_XAJUNIT_LAYER, xajUnitStyle)
    //     }
    //   } else {
    //     // clearLayer(mapInstance, JS_UNIT_LAYER)
    //     removeBasinVectorTiles(mapInstance, DWH_XAJUNIT_LAYER)
    //     removeBasinVectorTiles(mapInstance, YSH_XAJUNIT_LAYER)
    //   }
    //   break
    case 'jsUnitSk':
      if (event) {
        if (zoneId.value == 1) {
          //添加预报单元
          addBasinVectorTiles(
            window.mapInstance,
            DWH_SKBYUNIT_LAYER_URL,
            DWH_SKBYUNIT_LAYER,
            skbyUnitStyle
          )
          // //添加计算单元
          // addJsUnit(window.mapInstance, jsUnitData, JS_UNIT_LAYER)
        } else if (zoneId.value == 2) {
          // // //添加计算单元
          // addJsUnit(window.mapInstance, yshjsUnitData, JS_UNIT_LAYER)
          addBasinVectorTiles(
            window.mapInstance,
            YSH_SKBYUNIT_LAYER_URL,
            YSH_SKBYUNIT_LAYER,
            skbyUnitStyle
          )
        }
      } else {
        removeBasinVectorTiles(window.mapInstance, DWH_SKBYUNIT_LAYER)
        removeBasinVectorTiles(window.mapInstance, YSH_SKBYUNIT_LAYER)
      }
      break
    case 'jsUnitXaj':
      if (event) {
        if (zoneId.value == 1) {
          //添加预报单元
          addBasinVectorTiles(
            window.mapInstance,
            DWH_XAJUNIT_LAYER_URL,
            DWH_XAJUNIT_LAYER,
            xajUnitStyle
          )
          // //添加计算单元
          // addJsUnit(window.mapInstance, jsUnitData, JS_UNIT_LAYER)
        } else if (zoneId.value == 2) {
          // // //添加计算单元
          // addJsUnit(window.mapInstance, yshjsUnitData, JS_UNIT_LAYER)
          addBasinVectorTiles(
            window.mapInstance,
            YSH_XAJUNIT_LAYER_URL,
            YSH_XAJUNIT_LAYER,
            xajUnitStyle
          )
        }
      } else {
        removeBasinVectorTiles(window.mapInstance, DWH_XAJUNIT_LAYER)
        removeBasinVectorTiles(window.mapInstance, YSH_XAJUNIT_LAYER)
      }
      break
    case 'topology':
      if (event) {
        addTopology(mapInstance, state.topologyGeoData, TOPOLOGY_LAYER)
      } else {
        clearLayer(mapInstance, TOPOLOGY_LAYER)
      }
      break
    case 'river':
      if (event) {
        if (zoneId.value == 1) {
          //添加小流域
          // addWataLayer(mapInstance, wataData, WATA_LAYER)
          removeBasinVectorTiles(mapInstance, DWH_BASE_LAYER)
          addBasinVectorTiles(mapInstance, DWH_BASE_LAYER_URL, DWH_BASE_LAYER, riverLayerStyle)
        } else if (zoneId.value == 2) {
          removeBasinVectorTiles(mapInstance, YSH_BASE_LAYER)
          addBasinVectorTiles(mapInstance, YSH_BASE_LAYER_URL, YSH_BASE_LAYER, riverLayerStyle)
        }
        // //添加河道
        // addRiverLayer(mapInstance, riverData, RIVER_LAYER)
      } else {
        if (zoneId.value == 1) {
          // clearLayer(mapInstance, RIVER_LAYER)
          removeBasinVectorTiles(mapInstance, DWH_BASE_LAYER)
          // addBasinVectorTiles(mapInstance, DWH_BASE_LAYER_URL, DWH_BASE_LAYER, basinLayerStyle)
        } else if (zoneId.value == 2) {
          // clearLayer(mapInstance, RIVER_LAYER)
          removeBasinVectorTiles(mapInstance, YSH_BASE_LAYER)
          // addBasinVectorTiles(mapInstance, YSH_BASE_LAYER_URL, YSH_BASE_LAYER, basinLayerStyle)
        }
      }
      break
    case 'node':
      if (event) {
        addNodeLayer(mapInstance, state.nodeGeoData, NODE_LAYER)
      } else {
        clearLayer(mapInstance, NODE_LAYER)
      }
      break
    case 'rainSite':
      if (event) {
        addRainLayer(map, state.pptn, RAIN_LAYER)
      } else {
        clearLayer(mapInstance, RAIN_LAYER)
      }
      break
    default:
      break
  }
  // if (checkWata.value && checkRiver.value) {
  //   if (zoneId.value == 1) {
  //     removeBasinVectorTiles(mapInstance, DWH_BASE_LAYER)
  //     addBasinVectorTiles(mapInstance, DWH_BASE_LAYER_URL, DWH_BASE_LAYER, baselayerStyle)
  //   } else if (zoneId.value == 2) {
  //     removeBasinVectorTiles(mapInstance, YSH_BASE_LAYER)
  //     addBasinVectorTiles(mapInstance, YSH_BASE_LAYER_URL, YSH_BASE_LAYER, baselayerStyle)
  //   }
  // }
  // if (!checkWata.value && !checkRiver.value) {
  //   if (zoneId.value == 1) {
  //     removeBasinVectorTiles(mapInstance, DWH_BASE_LAYER)
  //   } else if (zoneId.value == 2) {
  //     removeBasinVectorTiles(mapInstance, YSH_BASE_LAYER)
  //   }
  // }
}
const secClickedMapPosition = (item) => {
  removeBasinVectorTiles(mapInstance, UNIT_SEC_LAYER)
  removeBasinVectorTiles(mapInstance, UNIT_COMPUT_LAYER)
  removeBasinVectorTiles(mapInstance, UNIT_PART_LAYER)
  removeBasinVectorTiles(mapInstance, WATA_LAYER)
  if (props.modelobj.typeCode == 'W090006') {
    locatePoint(mapInstance, item.lon, item.lat, 10)
    return
  }
  if (
    !(
      props.modelobj.typeCode == 'W040001' ||
      props.modelobj.typeCode == 'W010001' ||
      props.modelobj.typeCode == 'W040002' ||
      props.modelobj.typeCode == 'W090003'
    )
  ) {
    //查询计算单元坐标信息
    getSectionUnitGeom({ blkcd: item.blkcd }).then((res) => {
      if (res.code === 200) {
        if (res.data) {
          addGeojsontoFly(mapInstance, res.data, UNIT_SEC_LAYER, secStyle)
        }
      }
    })
    //查询新安江集合
    getXajUnitGeomList({ blkcd: item.blkcd }).then((res) => {
      if (res.code === 200) {
        if (res.data) {
          addGeojsontoFly(mapInstance, res.data, UNIT_COMPUT_LAYER, secStyle)
        }
      }
    })
    // changeJsUnitSecGraphic(mapInstance, item.blkcd, JS_UNIT_LAYER)
  }
}
const secClicked = (item, index) => {
  // removeBasinVectorTiles(mapInstance, UNIT_SEC_LAYER)
  // removeBasinVectorTiles(mapInstance, UNIT_COMPUT_LAYER)
  // removeBasinVectorTiles(mapInstance, UNIT_PART_LAYER)
  // removeBasinVectorTiles(mapInstance, WATA_LAYER)

  state.sectionObj = item
  console.log(state.sectionObj, '河系')
  currentLi.value = index
  // 因为一二维,联合调度 没有blkcd
  // if (
  //   !(
  //     props.modelobj.typeCode == 'W040001' ||
  //     props.modelobj.typeCode == 'W010001' ||
  //     props.modelobj.typeCode == 'W040002' ||
  //     props.modelobj.typeCode == 'W090003'
  //   )
  // ) {
  //   //查询计算单元坐标信息
  //   getSectionUnitGeom({ blkcd: item.blkcd }).then((res) => {
  //     if (res.code === 200) {
  //       if (res.data) {
  //         addGeojsontoFly(mapInstance, res.data, UNIT_SEC_LAYER, secStyle)
  //         // let arr = multipolygonToLnglats(res.data.geom)
  //         // addTopologyPosition(mapInstance, arr, UNIT_SEC_LAYER, secStyle)
  //       }
  //     }
  //   })
  //   //查询新安江集合
  //   getXajUnitGeomList({ blkcd: item.blkcd }).then((res) => {
  //     if (res.code === 200) {
  //       // if (res.data.length) {
  //       //   let arr = []
  //       //   res.data.forEach((item) => {
  //       //     arr.push(multipolygonToLnglats(item.geom))
  //       //   })
  //       //   addTopologyPosition(mapInstance, arr, UNIT_COMPUT_LAYER, secStyle)
  //       // }
  //       if (res.data) {
  //         addGeojsontoFly(mapInstance, res.data, UNIT_COMPUT_LAYER, secStyle)
  //       }
  //     }
  //   })
  //   // changeJsUnitSecGraphic(mapInstance, item.blkcd, JS_UNIT_LAYER)
  // }
  // else if (props.modelobj.typeCode == 'W010001') {
  //   emitter.emit('positionPartUnit', item)
  // }
  sectionName.value = item.title

  ishidden.value = false
  emitter.emit('secInfo', { ...item, modelId: props.modelobj.modelId })
}
//
emitter.on('positionWata', (value) => {
  console.log(value)
  // positionRiver(mapInstance, value, WATA_LAYER)
  getWataGeom({ wscd: value }).then((res) => {
    if (res.code === 200) {
      console.log(res)
      if (res.data) {
        addGeojsontoFly(mapInstance, res.data, WATA_LAYER, selectedsecStyle)
      }
    }
  })
})
emitter.on('positionPartUnit', (value) => {
  getXajUnitGeom({ clcd: value.clcd }).then((res) => {
    if (res.code === 200) {
      if (res.data) {
        addGeojsontoFly(mapInstance, res.data, UNIT_PART_LAYER, selectedsecStyle)
      }
    }
  })
})
// 打开降雨预报 通过区域 打开右侧弹框
const changeSelectRight = async (v) => {
  ishidden.value = false
  zoneId.value = v
  console.log(zoneId.value, 999999999999999)
  await PPtnGeomList()
  await SecGeomList()
  await NodeGeomList()
  await TopologyGeomList()
  clearLayer(mapInstance, SEC_LAYER)
  clearLayer(mapInstance, SEC_NAME_LAYER)
  clearLayer(mapInstance, JS_UNIT_LAYER)
  clearLayer(mapInstance, TOPOLOGY_LAYER)
  clearLayer(mapInstance, NODE_LAYER)
  clearLayer(mapInstance, WATA_LAYER)
  clearLayer(mapInstance, RIVER_LAYER)
  clearLayer(mapInstance, NODE_LAYER),
    clearLayer(mapInstance, RAIN_LAYER),
    removeBasinVectorTiles(mapInstance, DWH_BASE_LAYER)
  removeBasinVectorTiles(mapInstance, YSH_BASE_LAYER)
  removeBasinVectorTiles(mapInstance, DWH_XAJUNIT_LAYER)
  removeBasinVectorTiles(mapInstance, YSH_XAJUNIT_LAYER)

  let map = mapInstance
  if (v == 1) {
    // 添加断面点
    // 添加断面点
    addSecPoints(mapInstance, state.secGeoData.features, SEC_LAYER)
    // 添加断面名称
    addSecName(mapInstance, state.secGeoData.features, SEC_NAME_LAYER)
    // //添加计算单元
    // addJsUnitNoScheme(map, jsUnitData, JS_UNIT_LAYER)
    //添加矢量切片数据
    addBasinVectorTiles(map, DWH_XAJUNIT_LAYER_URL, DWH_XAJUNIT_LAYER, xajUnitStyle)
    // addBasinVectorTiles(mapInstance, DWH_SDLSEC_LAYER1_URL, DWH_SDLSEC1_LAYER, sdl1UnitStyle)
    //添加拓扑线
    addTopology(mapInstance, state.topologyGeoData, TOPOLOGY_LAYER)
    //添加雨量站
    addRainLayer(map, state.pptn, RAIN_LAYER)
    //添加小流域
    // addWataLayer(map, wataData, WATA_LAYER)
    // //添加河道
    // addRiverLayer(map, riverData, RIVER_LAYER)
    //添加节点
    addNodeLayer(mapInstance, state.nodeGeoData, NODE_LAYER)
    locatePoint(mapInstance, 117.1775, 36.06469, 10)
  } else if (v == 2) {
    //添加拓扑线
    addTopology(mapInstance, yshtopologyData, TOPOLOGY_LAYER)
    // 添加断面点
    addSecPoints(mapInstance, yshsecData.features, SEC_LAYER)
    // 添加断面名称
    addSecName(mapInstance, yshsecData.features, SEC_NAME_LAYER)
    // //添加计算单元
    // addJsUnit(mapInstance, yshjsUnitData, JS_UNIT_LAYER)
    // addJsUnitNoScheme(mapInstance, yshjsUnitData, JS_UNIT_LAYER)
    //添加矢量切片数据
    addBasinVectorTiles(mapInstance, YSH_XAJUNIT_LAYER_URL, YSH_XAJUNIT_LAYER, xajUnitStyle)
    addBasinVectorTiles(mapInstance, YSH_SDLSEC_LAYER1_URL, YSH_SDLSEC1_LAYER, sdl1UnitStyle)
    // //添加节点
    addNodeLayer(mapInstance, yshnodeData, NODE_LAYER)
    //添加雨量站
    addRainLayer(map, state.pptn, RAIN_LAYER)
    locatePoint(mapInstance, 118.379657, 35.018398, 10)
  }
}
//切换zone（大汶河）
const changeSelect = async (v) => {
  zoneId.value = v
  getLeftTree('first')
  await PPtnGeomList()
  await SecGeomList()
  await NodeGeomList()
  await TopologyGeomList()
  clearLayer(mapInstance, SEC_LAYER)
  clearLayer(mapInstance, SEC_NAME_LAYER)
  clearLayer(mapInstance, JS_UNIT_LAYER)
  clearLayer(mapInstance, TOPOLOGY_LAYER)
  clearLayer(mapInstance, NODE_LAYER)
  clearLayer(mapInstance, WATA_LAYER)
  clearLayer(mapInstance, RIVER_LAYER)
  clearLayer(mapInstance, NODE_LAYER),
    clearLayer(mapInstance, RAIN_LAYER),
    removeBasinVectorTiles(mapInstance, DWH_BASE_LAYER)
  removeBasinVectorTiles(mapInstance, YSH_BASE_LAYER)
  removeBasinVectorTiles(mapInstance, DWH_XAJUNIT_LAYER)
  removeBasinVectorTiles(mapInstance, YSH_XAJUNIT_LAYER)

  let map = mapInstance
  if (v == 1) {
    // 添加断面点
    // 添加断面点
    addSecPoints(mapInstance, state.secGeoData.features, SEC_LAYER)
    // 添加断面名称
    addSecName(mapInstance, state.secGeoData.features, SEC_NAME_LAYER)
    // //添加计算单元
    // addJsUnitNoScheme(map, jsUnitData, JS_UNIT_LAYER)
    //添加矢量切片数据
    addBasinVectorTiles(map, DWH_XAJUNIT_LAYER_URL, DWH_XAJUNIT_LAYER, xajUnitStyle)
    // if (props.modelobj.typeCode == 'W040001') {
    //   addBasinVectorTiles(mapInstance, DWH_SDLSEC_LAYER1_URL, DWH_SDLSEC1_LAYER, sdl1UnitStyle)
    // } else if (props.modelobj.typeCode == 'W040002') {
    //   addBasinVectorTiles(mapInstance, DWH_SDLSEC_LAYER2_URL, DWH_SDLSEC2_LAYER, sdl2UnitStyle)
    // }
    addBasinVectorTiles(map, DWH_BASE_LAYER_URL, DWH_BASE_LAYER, baselayerStyle)
    // addBasinVectorTiles(mapInstance, DWH_SDLSEC_LAYER1_URL, DWH_SDLSEC1_LAYER, sdl1UnitStyle)
    //添加拓扑线
    addTopology(mapInstance, state.topologyGeoData, TOPOLOGY_LAYER)
    //添加雨量站
    addRainLayer(map, state.pptn, RAIN_LAYER)
    //添加小流域
    // addWataLayer(map, wataData, WATA_LAYER)
    // //添加河道
    // addRiverLayer(map, riverData, RIVER_LAYER)
    //添加节点
    addNodeLayer(mapInstance, state.nodeGeoData, NODE_LAYER)
    locatePoint(mapInstance, 117.1775, 36.06469, 10)
  } else if (v == 2) {
    //添加拓扑线
    addTopology(mapInstance, state.topologyGeoData, TOPOLOGY_LAYER)
    // 添加断面点
    addSecPoints(mapInstance, state.secGeoData.features, SEC_LAYER)
    // 添加断面名称
    addSecName(mapInstance, state.secGeoData.features, SEC_NAME_LAYER)
    // //添加计算单元
    // addJsUnit(mapInstance, yshjsUnitData, JS_UNIT_LAYER)
    // addJsUnitNoScheme(mapInstance, yshjsUnitData, JS_UNIT_LAYER)
    //添加矢量切片数据
    addBasinVectorTiles(mapInstance, YSH_XAJUNIT_LAYER_URL, YSH_XAJUNIT_LAYER, xajUnitStyle)
    // if (props.modelobj.typeCode == 'W040001') {
    //   addBasinVectorTiles(mapInstance, YSH_SDLSEC_LAYER1_URL, YSH_SDLSEC1_LAYER, sdl1UnitStyle)
    // } else if (props.modelobj.typeCode == 'W040002') {
    //   addBasinVectorTiles(mapInstance, YSH_SDLSEC_LAYER2_URL, YSH_SDLSEC2_LAYER, sdl2UnitStyle)
    // }
    addBasinVectorTiles(mapInstance, YSH_BASE_LAYER_URL, YSH_BASE_LAYER, baselayerStyle)
    // addBasinVectorTiles(mapInstance, YSH_SDLSEC_LAYER1_URL, YSH_SDLSEC1_LAYER, sdl1UnitStyle)
    // //添加节点
    addNodeLayer(mapInstance, state.nodeGeoData, NODE_LAYER)
    //添加雨量站
    addRainLayer(map, state.pptn, RAIN_LAYER)
    locatePoint(mapInstance, 118.379657, 35.018398, 10)
  }
}
// 切换table
const handleChangeTab = (val) => {
  getLeftTree(val)
}
//刷新
const handleRefresh = () => {
  getLeftTree()
}
const getLeftTree = async (val) => {
  // 如果是1.2维
  if (props.modelobj.typeCode == 'W040001' || props.modelobj.typeCode == 'W040002') {
    state.sectionArr = []
    // 表示一二维 耦合

    if (props.modelobj.typeCode == 'W040001') {
      // 如果是一维
      state.flag = 0
    } else {
      // 如果是二维
      if (val == 'first') {
        state.flag = 1
        // 如果是二维则没有河道断面信息
        state.overHide = false
        console.log(state.overHide, '55erwei ')
      } else if (val == 'second') {
        // 如果是耦合 则有河道断面信息
        state.overHide = true
        console.log(state.overHide, '9999999wei ')

        state.flag = 2
      }
    }
    await getProjectList({
      mid: props.modelobj.id,
      zoneId: zoneId.value
    }).then((res) => {
      if (res.code === 200) {
        projectData.value = res.data
        state.selectProject = res.data[0].id
        removeBasinVectorTiles(mapInstance, DWH_SDLSEC1_LAYER)
        removeBasinVectorTiles(mapInstance, YSH_SDLSEC1_LAYER)
        removeBasinVectorTiles(mapInstance, DWH_SDLSEC2_LAYER)
        removeBasinVectorTiles(mapInstance, YSH_SDLSEC2_LAYER)
        if (state.flag == 0) {
          addBasinVectorTiles(
            mapInstance,
            BASE_URL + `/map/vectorTiles/sdl/1/${zoneId.value}/${state.selectProject}/{z}/{x}/{y}`,
            zoneId.value == 1 ? DWH_SDLSEC1_LAYER : YSH_SDLSEC1_LAYER,
            sdl1UnitStyle
          )
        } else {
          addBasinVectorTiles(
            mapInstance,
            BASE_URL + `/map/vectorTiles/sdl/2/${zoneId.value}/${state.selectProject}/{z}/{x}/{y}`,
            zoneId.value == 1 ? DWH_SDLSEC2_LAYER : YSH_SDLSEC2_LAYER,
            sdl2UnitStyle
          )
        }
      }
    })
    getZoneList({
      modelType: state.flag,
      zoneId: zoneId.value,
      engrId: state.selectProject
    }).then((res) => {
      if (res.code === 200) {
        res.data.forEach((item) => {
          item.title = item.zoneName
        })

        state.sectionArr = res.data
      }
    })
  }
  // 如果为优化 规程 联合则查水库信息
  else if (props.modelobj.typeCode == 'W090002' || props.modelobj.typeCode == 'W090001') {
    // 查询水库信息
    getRangeSections({
      zoneId: zoneId.value,
      blknm: ''
    }).then((res) => {
      if (res.code === 200) {
        state.sectionArr = res.data.map((item) => ({
          title: item.blknm,
          id: item.id,
          blkcd: item.blkcd
        }))
      }
    })
  } else if (props.modelobj.typeCode == 'W090003') {
    // 如果是联合调度
    getRanges({
      zoneId: zoneId.value
    }).then((res) => {
      if (res.code == 200) {
        state.sectionArr = res.data.map((item) => ({
          ...item,
          title: item.rangeName
        }))
      }
    })
  } else if (props.modelobj.typeCode == 'W010004') {
    // AI洪水
    getFloodSectionsList({
      zoneId: zoneId.value
    }).then((res) => {
      if (res.code == 200) {
        console.log(res.data, 'ai洪水')
        // state.sectionArr = res.data.map((item) => ({
        //   title: item.blknm,
        //   id: item.id,
        //   blkcd: item.blkcd
        // }))

        res.data.forEach((e) => {
          e.title = e.blknm
        })
        state.sectionArr = res.data
      }
    })
  } else if (props.modelobj.typeCode == 'W090004') {
    // AI水库调度
    getReservoirSectionsList({
      zoneId: zoneId.value
    }).then((res) => {
      if (res.code == 200) {
        state.sectionArr = res.data.map((item) => ({
          title: item.blknm,
          id: item.id,
          blkcd: item.blkcd
        }))
      }
    })
  } else if (props.modelobj.typeCode == 'W010001') {
    // 时空变源左侧信息
    getSkbyCalUnits({
      mid: 1,
      zoneId: zoneId.value
    }).then((res) => {
      if (res.code == 200) {
        res.data.forEach((item) => {
          item.title = item.unitnm
        })
        state.sectionArr = res.data
      }
    })
  } else if (props.modelobj.typeCode == 'W090006') {
    // 溃坝左侧信息
    handleKbInfo('', zoneId.value)
  } else {
    // 查询预报断面结构树
    getSectionTree({
      zoneId: zoneId.value
    }).then((res) => {
      if (res.code === 200) {
        state.sectionArr = res.data.map((item) => ({
          title: item.blknm,
          id: item.id,
          blkcd: item.blkcd
        }))
      }
    })
  }
}
function initData() {
  return new Promise((resolve, reject) => {
    getZone().then((res) => {
      if (res.code === 200) {
        state.placeholderOne = res.data[0].name
        state.options = res.data
        zoneId.value = res.data[0].id
        getLeftTree('first')
        // changeSelect(zoneId.value)
        changeSelectRight(zoneId.value)
      }
    })
  })
  /* state.sectionArr = sec_info.map((item) => ({
    title: item.blknm,
    id: item.blkcd
  })) */
}
const handleKbInfo = (blknm = '', zoneId) => {
  getDbfSectionsList({
    blknm,
    zoneId
  }).then((res) => {
    if (res.code == 200) {
      res.data.forEach((item) => {
        item.title = item.blknm
        item.id = item.zoneId
      })
      state.sectionArr = res.data
      addSecColorPoints(mapInstance, state.sectionArr, KB_LAYER)
    }
  })
}
onMounted(() => {
  initData()
})
</script>
<style lang="less" scoped>
.el-row {
  height: 30px;
}
.map-container {
  // background-color: #f5f5f5;
  background-color: #1b3267;
}

.select-box {
  position: absolute;
  top: 50px;
  left: 30px;
  :deep(.el-input) {
    margin-bottom: 5px;
    border: 1px solid #149bd5;
    border-radius: 5px;
  }
  .ul-box {
    ul {
      height: 230px;
      overflow-y: auto;
      font-size: 14px;
      .item-li {
        .close-icon {
          color: red;
          position: absolute;
          right: 10px;
        }
        .edit-icon {
          position: absolute;
          right: 25px;
          margin-right: 10px;
        }
        &.active {
          span {
            color: #0154db;
          }
          .close-icon {
            color: red;
            position: absolute;
            right: 10px;
          }
          .edit-icon {
            position: absolute;
            right: 25px;
          }
        }
        display: flex;
        justify-content: center;
        align-items: center;
        height: 35px;
        position: relative;

        cursor: pointer;
        span {
          color: white;
        }
        span:nth-of-type(1) {
          max-width: 200px; //也可以设置最大宽度
          overflow: hidden; //溢出隐藏
          white-space: nowrap; // 强制一行显示
          text-overflow: ellipsis; // 显示。。。省略号
        }

        &.active {
          span {
            color: #00d3e9;
          }
        }
      }
    }
  }
  .header-select {
    width: 200px;
    margin-bottom: 20px;
  }
}
.select-project-box {
  position: absolute;
  top: 50px;
  left: 350px;
  :deep(.el-input) {
    margin-bottom: 5px;
    border: 1px solid #149bd5;
    border-radius: 5px;
  }
  .ul-box {
    ul {
      height: 230px;
      overflow-y: auto;
      font-size: 14px;
      .item-li {
        .close-icon {
          color: red;
          position: absolute;
          right: 10px;
        }
        .edit-icon {
          position: absolute;
          right: 25px;
          margin-right: 10px;
        }
        &.active {
          span {
            color: #0154db;
          }
          .close-icon {
            color: red;
            position: absolute;
            right: 10px;
          }
          .edit-icon {
            position: absolute;
            right: 25px;
          }
        }
        display: flex;
        justify-content: center;
        align-items: center;
        height: 35px;
        position: relative;

        cursor: pointer;
        span {
          color: #797979;
        }
        span:nth-of-type(1) {
          max-width: 200px; //也可以设置最大宽度
          overflow: hidden; //溢出隐藏
          white-space: nowrap; // 强制一行显示
          text-overflow: ellipsis; // 显示。。。省略号
        }

        &.active {
          span {
            color: #0154db;
          }
        }
      }
    }
  }
  .header-select {
    width: 200px;
    margin-bottom: 20px;
  }
}
.legend-box {
  position: absolute;
  bottom: 20px;
  width: 220px;
  height: 170px;
  margin-left: 70px;
  border: #169bd5 2px solid;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.7);
  .legend-title {
    display: block;
    margin-left: 30px;
    margin-top: 10px;
    color: #169bd5;
    font-weight: 500;
  }
  .legend-item {
    margin-left: 20px;
    margin-top: 10px;
  }
}
.rightBox {
  box-sizing: border-box;
  position: absolute;
  right: 0;
  top: 0;
  width: 1000px;
  height: 100%;
  border: 1px solid var(--fold-border-color);
  border-radius: 4px;
  background-color: var(--fold-bg-color);
  transition: right 1s;
  padding-left: 20px;
  padding-right: 20px;

  &.hidden-icon {
    right: -1000px;
    transition: right 1s;
  }

  .fold-icon {
    width: 20px;
    height: 120px;
    line-height: 120px;
    position: absolute;
    background: #eee;
    top: 50%;
    left: -20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 35px;
    border-bottom-left-radius: 35px;
    transform: translateY(-50%);

    @keyframes myload {
      from {
        opacity: 0;
        -webkit-transform: rotate(0deg);
        /* Safari */
        transform: rotate(0deg);
        /* 标准语法 */
      }

      to {
        opacity: 1;
        -webkit-transform: rotate(0deg);
        /* Safari */
        transform: rotate(0deg);
        /* 标准语法 */
      }
    }

    .el-icon {
      cursor: pointer;
      position: relative;
      display: block;
      animation: myload 1s infinite ease-in-out;
      -webkit-animation: myload 1s infinite ease-in-out;

      svg {
        &.hidden-icon {
          // border-top-right-radius: 35px;
          // border-bottom-right-radius: 35px;
          transform: rotate(180deg);
        }
      }
    }
  }
}
</style>
